<template>
	<view class="allorder_index">
		<ABanner :isSeach="false" :highLight="highLight" @sendNum="handleTab" :menuList="['全部订单']"></ABanner>
		<view v-for="(item,index) in params.list" :key="index" class="detail_index">
			<view class="tips_title">
				<span v-if="item.orderStatus===-1">等待付款</span>
				<span v-if="item.orderStatus===0">支付成功正在出货</span>
				<span v-if="item.orderStatus===1">已退款</span>
				<span v-if="item.orderStatus===2">退款失败</span>
				<span v-if="item.orderStatus===3">退款成功</span>
				<span v-if="item.orderStatus===4">出货失败</span>
				<span v-if="item.orderStatus===5">出货成功</span>
				<span v-if="item.orderStatus===6">出货超时</span>
				<span v-if="item.orderStatus===7">支付失败</span>
				<span v-if="item.orderStatus===8">支付中</span>
				<span v-if="item.orderStatus===9">退款中</span>
				<span v-if="item.orderStatus===10">订单已取消</span>
			</view>
			<view @click="handleClick(item)" class="shop_detail">
				<view class="pic_content">
					<image :src="item.machineProduct.realProductImgUrl" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title1">
						{{item.machineProduct.productName}}
						<span>￥{{item.machineProduct.price}}</span>
					</view>
					<!-- <view class="description">
						超熟睡420柔棉感量多夜用纤巧棉柔 4片/包
					</view>
					<view class="category">
						棉柔|夜用
					</view> -->
				</view>
			</view>
			<view class="price_title">
				<span v-if="item.orderStatus===0">已付款￥{{item.payValue}}元</span>
				<span v-if="item.orderStatus===-1">需付款￥{{item.payValue}}元</span>
				<span v-if="item.orderStatus===6">应付款￥{{item.payValue}}元</span>
			</view>
			<!-- 	<u-modal :show="showCancel" showCancelButton cancelText="取消" @cancel="showCancel = false"
				@confirm="deleteHandle(item)" :content='cancelContent'>
			</u-modal> -->
			<view class="param_container">
				<!-- 未支付状态 -->
				<view style="display: flex;align-items: center" v-if="item.orderStatus===-1">
					<button @click="payHandle(item)" type="default">
						<view class="">
							立即支付
						</view>
						<view v-if="!getTimeStamp(item.orderId)<=0" class="paytime">
							<u-count-down @change="onChange" :time="getTimeStamp(item.orderId)"
								format="mm:ss"></u-count-down>
						</view>
					</button>
					<button class="cancleBtn" @click="cancelHandler(item)" type="default">取消订单</button>
				</view>

				<!-- 已支付0状态 -->
				<view style="display: flex;" v-if="item.orderStatus===0">
					<button @click="deleteHandle(item)" type="default">删除记录</button>
					<button @click="rebackProduct(item)" type="default">申请退款</button>
				</view>
				<view style="display: flex;" v-if="item.orderStatus===6">
					<!-- <button class="cancleBtn" type="default" :disabled="true">已超时</button> -->
					<button @click="deleteHandle(item)" type="default">删除记录</button>
				</view>
				<view v-if="item.orderStatus===10">
					<button @click="deleteHandle(item)" type="default">删除记录</button>
				</view>
				<!-- 退款中 9 -->
				<view v-if="item.orderStatus===9">
					<!-- <button @click="rebackProduct(item)" type="default">退款中</button> -->
					<button type="default">退款中</button>
				</view>
				<!-- 退款失败 2 -->
				<view v-if="item.orderStatus===2">
					<button @click="rebackProduct(item)" type="default">退款失败</button>
				</view>
			</view>
		</view>
		<view v-if="params.list.length==0" class="empty_container">
			<u-empty text="暂无订单" mode="data" width="100%" iconSize="60" textSize="32"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getOrder,
		payment,
		pay,
		cancelOrder,
		deleteOrder
	} from '@/api/order.js'
	export default {
		onLoad() {
			this.pageParams.page = 1
			this.getOrderData(this.pageParams)
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.pageParams.page = 1
				this.getOrderData(this.pageParams)
			}, 1000);
		},
		onReachBottom() {
			if (this.params.total !== this.params.list.length) {
				this.pageParams.page += 1
				getOrder({
					...this.pageParams,
				}).then(res => {
					this.params.list = this.params.list.concat(res.data.list)
					this.params.total = res.data.total
				})
			}
		},
		data() {
			return {
				itemData: ["所有订单"],
				params: {
					list: {},
					total: 0
				},
				timestamp: 0,
				pageParams: {
					page: 1,
					limit: 10
				},
				showCancel: false,
			}
		},
		methods: {
			// 删除订单
			deleteHandle(item) {
				wx.showModal({
					content: '您确认要删除该条记录吗？',
					success: (val) => {
						if (val.confirm) {
							deleteOrder(item.orderId).then(res => {
								console.log(res);
								this.showCancel = false
								this.getOrderData(this.pageParams)
							})
						} else if (res.cancel) {

						}
					}
				})

			},
			// 退款
			rebackProduct(item) {
				let strItem = JSON.stringify(item)
				let jsonString = encodeURIComponent(strItem)
				uni.navigateTo({
					url: `/pages/user/refund/index?item=${jsonString}`
				})
			},
			// 取消订单
			cancelHandler(item) {
				wx.showModal({
					title: '您确认要取消该订单吗？',
					success: (val) => {
						if (val.confirm) {
							cancelOrder(item.orderId).then(res => {
								this.getOrderData(this.pageParams)
							})
						}
					},
				})
			},
			payHandle(item) {
				uni.getProvider({
					service: 'oauth'
				}).then(res => {
					let provider = res[1].provider[0]
					uni.login({
						provider: provider,
					}).then(res1 => {
						this.code = res1[1].code
						let resData = {
							"orderNo": item.orderId,
							"payChannel": "routine",
							"payType": "A",
						}
						pay(this.code, resData).then(res => {
							let paramsData = res.data.jsConfig
							console.log('paramsData', paramsData);
							if (res.code === 200) {
								uni.requestPayment({
									"appId": paramsData.appId,
									"nonceStr": paramsData.nonceStr,
									"package": paramsData.packages,
									"timeStamp": paramsData.timeStamp,
									"paySign": paramsData.paySign,
									"signType": 'MD5',
									success: (res1) => {
										console.log('success', res1);
										uni.showToast({
											title: '支付成功'
										})
										this.getOrderData(this.pageParams)

									},
									fail: (res) => {
										console.log('err', res);
										uni.showToast({
											title: '取消支付',
											icon: 'error'
										})
									}
								})
							}
						}).catch(err => {
							console.log(err);
							uni.showToast({
								title: err
							})
						})
					}).catch(error => {
						console.log(err);
						reject(error)
					})
				})
				// payment(item.orderId).then(res => {
				// 	if (res.code === 200) {
				// 		let jsonString = JSON.stringify(item)
				// 		let encodeURIComponentStr = encodeURIComponent(jsonString)
				// 		setTimeout(() => {
				// 			uni.showToast({
				// 				icon: 'success',
				// 				title: '支付成功'
				// 			})
				// 			uni.reLaunch({
				// 				url: `/pages/user/prepayment/prepayment_status?item=${encodeURIComponentStr}`
				// 			}, 500)
				// 		})
				// 	}
				// })
			},
			handleClick(item) {
				let jsonString = JSON.stringify(item)
				let encodeURIComponentStr = encodeURIComponent(jsonString)
				uni.navigateTo({
					url: `/pages/user/prepayment/prepayment_status?item=${encodeURIComponentStr}`
				})
			},
			getTimeStamp(orderId) {
				let localTime = new Date().getTime()
				let currentItem = this.$store.getters.getTime({
					orderId: orderId,
					uid: this.$store.getters.uid
				})
				return ((currentItem?.endTime - localTime) || 0)
			},
			onChange(e) {

			},
			getOrderData(data) {
				getOrder(data).then(res => {
					this.params.list = res.data.list
					this.params.total = res.data.total
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.allorder_index {
		width: 100%;

		.detail_index {
			background-color: #fff;
			border-radius: 10rpx;
			// margin-top: -30rpx;
			width: 95%;
			margin: -20rpx auto;
			margin-bottom: 40rpx;

			.item_container {
				display: flex;
				flex-direction: column;

				.item_info {

					margin: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.info_item {}

					image {
						padding: 0 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.tips_title {
				font-size: 36rpx;
				text-align: right;
				color: #F86853;
				padding: 20rpx 30rpx;
			}

			.shop_detail {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				padding: 20rpx;

				.pic_content {
					width: 30%;

					image {
						width: 100%;
					}
				}

				.content {
					width: 70%;
					margin-left: 20rpx;

					.title1 {
						font-size: 36rpx;

						span {
							font-size: 38rpx;
							float: right;
							font-weight: bold;
						}

					}

					.description {
						margin: 20rpx 0;
						letter-spacing: 0.10rem;
					}

					.category {
						font-size: 24rpx;
						color: #B0B0B0;
					}
				}
			}

			.price_title {
				// float: right;
				text-align: right;
				font-size: 38rpx;
				margin: 20rpx 70rpx;
			}

			.param_container {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-right: 20rpx;

				.cancleBtn {
					background-color: #fff;
					border: 1px solid #ccc;
					color: black;
				}

				/deep/ .u-count-down text {
					color: #F86853;
				}

				button {
					padding: 10rpx 40rpx;
					margin: 20rpx;
					border-radius: 40rpx;
				}

				button {
					background-color: #fff;
					color: #F86853;
					border: 1px solid #F86853;
				}
			}

			.shop_info_desc {
				padding: 20rpx;

				.shop_item {
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.value {
						color: #A9A9A9;
					}
				}
			}
		}
	}
.empty_container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60vh;

	.u-empty {
		height: 60vh;
	}
}
</style>